import React from 'react';
import { View, Text, Button, Image, StyleSheet } from 'react-native';

// 定义一个对象，用于映射产品名称到相应的图片资源
const productImages = {
  Phone: require('../assets/images/phone.png'),
  MateBook: require('../assets/images/mateBook.png'),
  Pad: require('../assets/images/pad.png'),
  Watch: require('../assets/images/watch.png'),
  FreeBuds: require('../assets/images/freeBuds.png'),
};

// 定义ProductItem组件，它接收名称、价格、图片和添加到购物车的回调函数作为props
const ProductItem = ({ name, price, image, onAdd }) => {
  return (
    // 使用View作为容器组件，设置样式以实现布局和视觉效果
    <View style={styles.item}>
      {/* 使用Image组件显示产品图片，图片资源从productImages对象中根据产品名称动态获取 */}
      <Image source={productImages[name]} style={styles.image} />
      {/* 信息部分的容器 */}
      <View style={styles.info}>
        {/* 显示产品名称 */}
        <Text style={styles.name}>{name}</Text>
        {/* 显示产品价格 */}
        <Text style={styles.price}>￥{price}</Text>
        {/* 显示加入购物车按钮，当点击时触发onAdd回调函数 */}
        <Button title="加入购物车" onPress={onAdd} />
      </View>
    </View>
  );
};


const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    padding: 10,
    marginVertical: 8,
    backgroundColor: '#fff',
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,
    elevation: 4,
  },
  image: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 10,
  },
  info: {
    flex: 1,
    justifyContent: 'center',
  },
  name: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  price: {
    fontSize: 14,
    color: '#666',
  },
});


export default ProductItem;
